<template>
  <div class="mv-play" ref="mvPlay">
    <!-- 头部返回 -->
    <div class="mv-play-header">
      <img src="@/assets/img/icon-back.png" alt="返回" @click="toBack">
      <h2>返回</h2>
    </div>
    <!-- 视频播放 -->
    <div class="mv-play-video-wrapper">
      <video :src="mvurl" ref="video" class="mv-play-video" controls></video>    
    </div>
    
    <Scroll ref="scroll" class="mv-play-other" :data="mvOthers">
      <!-- mv简介、相关推荐 -->
      <ul class="mvList-ul">
				<li class="mvList-li" v-for="(item,index) in mvOthers" :key="index" @click="selectItem(index)">
					<div class="mvList-cover">
						<img v-lazy="item.cover_pic" alt="">
					</div>
					<div class="mvList-content">
						<!-- mvTitle -->
						<div class="mvList-content-name">{{item.name}}</div>
						<!-- mvDesc -->
						<div class="mvList-content-desc">{{item.uploader_nick || item.singers[0].name}}</div>
					</div>
				</li>
			</ul>
      <!-- 没有数据时显示加载状态 -->
			<div class="loading" v-show="mvOthers.length===0 ? 1:0">
				<Loading />
			</div>
    </Scroll>
  </div>
</template>

<script>
import Loading from 'base/loading/Loading'
import Scroll from 'base/scroll/Scroll'
import { mapGetters } from 'vuex'
import { getMvUrl, getMvDetail } from 'api/mv'
export default {
  components: {
    Loading,
    Scroll
  },
  computed: {
    ...mapGetters(['currentMvId','mvInfos'])
  },
  created(){
    this._getMvUrl()
    this._getMvDetail(this.currentMvId)
    // console.log(this.mvInfos)
  },
  data() {
    return {
      mvurl: '',
      mvInfo: '',
      mvOthers: [],
      mvOtherVids: []
    }
  },
  methods: {
    toBack: function() {
      this.$router.go(-1);
    },
    _getMvUrl() {
      var that = this
      getMvUrl(this.currentMvId).then(res => {
        let datas = res.getMvUrl.data
        that.mvurl = datas[that.currentMvId].mp4[1].freeflow_url[0]
        // console.log(that.mvurl)
      })
    },
    _getMvDetail(vid){
      var that = this
      getMvDetail(vid).then(res => {
        that.mvOthers = res.other.data.list
        for (let index = 0; index < that.mvOthers.length; index++) {
          that.mvOtherVids.push(that.mvOthers[index].vid)
        }
      })
    },
    showControl() {
      this.controlShow = true;
      this.controlShow = !this.controlShow;
    },
    selectItem(index) {
      this._getMvDetail(this.mvOtherVids[index])
      var that = this
      getMvUrl(this.mvOtherVids[index]).then(res => {
        let datas = res.getMvUrl.data
        let MP4 = datas[that.mvOtherVids[index]].mp4
        for (let index = 0; index < MP4.length; index++) {
          if (MP4[index].freeflow_url.length > 0) {
            for (let i= 0; i < MP4[index].freeflow_url.length; i++) {
              if (MP4[index].freeflow_url[i]!=='') {
                return that.mvurl = MP4[index].freeflow_url[i]
              }
            }
          }
        }
      })
    },
    _getMvInfo(res) {
      this.mvInfo = res.data[this.currentMvId].name
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/mixin.scss";
.mv-play {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 301;
  background: $background-color;
}

.mv-play .mv-play-header {
  width: 100%;
  height: rem(45);
  background: rgba(0,0,0,.3);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 301;
}
.mv-play .mv-play-header img {
  width: rem(35);
  height: rem(35);
  position: absolute;
  left: rem(12);
  top: rem(5);
}
.mv-play .mv-play-header h2 {
  height: rem(45);
  padding-left: rem(45);
  color: #fff;
  font-size: rem(18);
  line-height: rem(46);
}

.mv-play .mv-play-video-wrapper {
  padding: 0 rem(5) rem(5);
  background: $background-color;
  position: relative;
  z-index: 300;
}
.mv-play-video-wrapper .mv-play-video {
  width: 100%;
  /* height: 31vh; */
  /* margin: auto; */
}
.mv-play .mv-play-other {
  width: 100%;
  height: 58vh;
}
.mvList-ul .mvList-li-header {
  height: rem(30);
  padding-left: rem(10);
  padding-bottom: rem(10); 
  color: #fff;
  font-size: rem(18);
  line-height: rem(30);
}
.mvList-ul .mvList-li {
	display: flex;
  height: rem(80);
  padding: 0 rem(20) rem(20) rem(20);
}
/* .mvList-ul .mvList-li:first-child {
  padding-top: rem(20);
} */
/* .mvList-ul .mvList-li:last-child {
  padding-bottom: rem(40);
} */
.mvList-li .mvList-cover {
	flex: 0 0 rem(165);
  width: rem(165);
  height: rem(80);
	overflow: hidden;
}
.mvList-li .mvList-cover img {
  width: rem(146);
  height: rem(80);
  border-radius: rem(5);
}
.mvList-li .mvList-content {
	display: flex;
	height: rem(80);
	/* padding-left: rem(70); */
	flex-direction: column;
  overflow: hidden;
}
.mvList-content .mvList-content-name {
	height: rem(30);
	padding: rem(5) 0 rem(15);
	overflow: hidden;
	color: #fff;
	font-size: rem(15);
}
.mvList-content .mvList-content-desc {
	color: rgba(255, 255, 255, 0.486);
	font-size: rem(14);
}
.loading {
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
</style>
